<template>
    <s-theme :top="conf.top" :bottom="60">
        <s-tabbar ani :list="conf.list" :active="CIndex.active" @change="changeTarbar" />
        <homeVue v-if="CIndex.active === '首页'" />
        <sendVue v-else-if="CIndex.active === '快递中心'" />
        <shopVue v-else-if="CIndex.active === '购物车'" />
        <userVue v-else-if="CIndex.active === '我的'" />
        <s-login />
    </s-theme>
</template>

<script lang="ts" setup>
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import CIndex from '~/store/CIndex'
import CLogin from '~/store/CLogin'
import CSystem from '~/store/CSystem'
import System from '~/utils/System'
import homeVue from '../home/index.vue'
import sendVue from '../send/index.vue'
import shopVue from '../shop/index.vue'
import userVue from '../user/index.vue'
const conf = reactive({
    list: [
        {
            icon: 'home',
            label: '首页',
            top: 0
        },
        {
            icon: 'send',
            label: '快递中心',
            top: 0
        },
        {
            icon: 'shopping',
            label: '购物车',
            iconSize: '44',
            iconStyle: { transform: 'translateY(3px)' },
            top: CSystem.customBarHeight
        },
        {
            icon: 'user',
            label: '我的',
            top: 0
        }
    ],
    top: 0
})

const changeTarbar = (item: any) => {
    if (item.value === '快递中心') {
        if (System.checkLogin(true)) {
            CLogin.dialog.content = '登录后可下单，请登录'
            return
        }
    }
    conf.top = item.top
    CIndex.active = item.value
}

onShareTimeline(() => {
    return {
        title: '#{title}',
        path: '/pages/index/index',
        query: 'id=666',
        imageUrl: '/static/icon.png'
    }
})
onShareAppMessage((event) => {
    return {
        title: '#{title}',
        path: '/pages/index/index',
        query: 'id=233',
        imageUrl: '/static/icon.png'
    }
})

onLoad((option) => {
    console.log('地址或分享地址参数', option)
})
</script>
<style lang="less" scoped></style>
